<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import axios from '@/request/http'
import { useMainStore } from '@/store/main'

const emit = defineEmits(['refresh'])

const store = useMainStore()

const isLoading = ref(false)
const wjList = ref<any[]>([])

//打开窗口
const dialogVisible = ref(false)
const openDialog = (data: any) => {
  wjList.value = data
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
    mlbh: store.$state.nodeTreeData?.bh,
    wjbhList: data.map((item: any) => item.wjbh),
  }
  request(params)
  dialogVisible.value = true
}

// 获取当前文件目录
const request = (params: any) => {
  wsjzglService
    .createAjwjml(params)
    .then((res) => {
      if (res.data.mlxxList.length) {
        tableData.value = res.data.mlxxList.map((item) => {
          return {
            jswjsxh: item.jsy,
            kswjsxh: item.ksy,
            mlmc: item.mltm,
            mlscrq: item.bmwcrq,
            mlsxh: item.mlsxh,
            wh: item.mlwh,
            wjbhList: item.wjbhList,
            zrz: item.zrz,
          }
        })
      } else {
        wjList.value = [
          {
            jswjsxh: 1,
            kswjsxh: 1,
            mlmc: '',
            mlscrq: '',
            mlsxh: 0,
            wh: '',
            wjbhList: [],
            zrz: '',
          },
        ]
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      isLoading.value = false
    })
}

// 保存目录
const save = () => {
  let mlxxList = tableData.value.map((item, index) => ({
    ...item,
    mlsxh: index,
    wjbhList: wjList.value.slice(item.ksy - 1, item.jsy).map((child) => child.wjbh),
  }))
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
    mlbh: store.$state.nodeTreeData?.bh,
    mlxxList,
  }
  isLoading.value = true
  wsjzglService
    .saveAjbmjg(params)
    .then(() => {
      ElMessage({
        type: 'success',
        message: '保存成功',
      })
      emit('refresh')
      closeDialog()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      isLoading.value = false
    })
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  dialogVisible.value = false
}

const tableData = ref<any[]>([])
// 结束页
const jsyFn = (jsy: number, ksy: number, index: number) => {
  if (jsy >= ksy && jsy <= wjList.value.length) {
    // 若下方存在元素
    if (tableData.value[index + 1]) {
      if (jsy >= tableData.value[index + 1].kswjsxh) {
        tableData.value[index].jswjsxh = ksy
      }
    }
    return
  }
  tableData.value[index].jswjsxh = ksy
}

// 上方插入行
const sfcrhFn = (ksy: number, index: number) => {
  if (ksy === tableData.value[index - 1].jswjsxh + 1) {
    return ElMessage.warning('此间已无页数可添加')
  }
  // 当前行结束页小于总页数则可以添加
  tableData.value.splice(index, 0, {
    bmwcrq: '',
    jsy: ksy - 1,
    ksy: ksy - 1,
    mlsxh: index,
    mltm: '',
    mlwh: '',
    wjbhList: [],
    zrz: '',
  })
}

// 下方插入行
const xfcrhFn = (jsy: number, index: number) => {
  // 若下方存在元素
  if (tableData.value[index + 1]) {
    if (jsy >= tableData.value[index + 1].kswjsxh - 1) {
      return ElMessage.warning('此间已无页数可添加')
    }
  }
  // 当前行结束页小于总页数则可以添加
  tableData.value.splice(index + 1, 0, {
    bmwcrq: '',
    jsy: jsy + 1,
    ksy: jsy + 1,
    mlsxh: index + 1,
    mltm: '',
    mlwh: '',
    wjbhList: [],
    zrz: '',
  })
}
// 删除行
const schFn = (index: number) => {
  tableData.value.splice(index, 1)
}

defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="编目"
    width="80%"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <div class="dialog-content">
      <div class="left-box">
        <div class="left-header">待编目材料</div>
        <div class="writings-box">
          <div class="writings-item" v-for="item in wjList" :key="item.wjbh">
            <div class="item-content">
              <div class="content-img">
                <img :src="axios.defaults.baseURL + '/fpi/wjfw/download?wjbh=' + item.jpgwjxh" />
              </div>
              <div class="content-footer" v-if="item.jcztmc">{{ item.jcztmc }}</div>
            </div>
            <div class="pageNumber">{{ item.wjsxh }}</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="left-header">目录信息</div>
        <div class="table-box">
          <el-table height="100%" :data="tableData">
            <el-table-column label="序号">
              <template #default="scope">
                <el-input v-model="scope.row.mlsxh" />
              </template>
            </el-table-column>
            <el-table-column label="题名">
              <template #default="scope">
                <el-input v-model="scope.row.mlmc" />
              </template>
            </el-table-column>
            <el-table-column label="文号">
              <template #default="scope">
                <el-input v-model="scope.row.wh" />
              </template>
            </el-table-column>
            <el-table-column label="责任人">
              <template #default="scope">
                <el-input v-model="scope.row.zrz" />
              </template>
            </el-table-column>
            <el-table-column label="日期">
              <template #default="scope">
                <el-date-picker
                  style="width: 100%"
                  v-model="scope.row.mlscrq"
                  type="date"
                  placeholder="请选择"
                  size="small"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                />
                <!-- <el-input v-model="scope.row.mlscrq" /> -->
              </template>
            </el-table-column>
            <el-table-column prop="kswjsxh" label="开始页">
              <template #default="scope">
                <el-input v-model="scope.row.kswjsxh" disabled />
              </template>
            </el-table-column>
            <el-table-column prop="jswjsxh" label="结束页">
              <template #default="scope">
                <el-input
                  v-model="scope.row.jswjsxh"
                  @blur="jsyFn(scope.row.jswjsxh, scope.row.kswjsxh, scope.$index)"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-popover :width="150" trigger="click">
                  <template #reference>
                    <el-link type="primary">操作</el-link>
                  </template>
                  <div>
                    <el-link
                      @click="sfcrhFn(scope.row.kswjsxh, scope.$index)"
                      type="primary"
                      :disabled="scope.$index === 0"
                    >
                      上方插入行
                    </el-link>
                  </div>
                  <div>
                    <el-link
                      type="primary"
                      @click="xfcrhFn(scope.row.jswjsxh, scope.$index)"
                      :disabled="scope.row.jswjsxh === wjList.length"
                    >
                      下方插入行
                    </el-link>
                  </div>
                  <div>
                    <el-link
                      type="danger"
                      @click="schFn(scope.$index)"
                      :disabled="scope.$index === 0"
                      >删除行</el-link
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save" :loading="isLoading">保存目录</el-button>
        <el-button @click="closeDialog">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-content {
  width: 100%;
  height: 600px;
  display: flex;

  .left-box {
    flex: 1;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .left-header {
      height: 16px;
      line-height: 16px;
      color: #526a89;
      font-weight: bold;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 26px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background-color: #006cff;
        margin-right: 6px;
      }
    }

    .writings-box {
      //   flex: 1;
      //   flex-shrink: 0;
      height: 560px;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      padding-left: 5px;

      .writings-item {
        width: 33.33%;
        height: 274px;
        padding: 10px 10px 0 0;
        display: flex;
        flex-direction: column;

        .item-content {
          display: flex;
          flex-direction: column;
          flex: 1;
          flex-shrink: 0;
          background-color: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          cursor: pointer;

          .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;

            img {
              width: 15px;
              height: 15px;
            }
          }

          .content-img {
            padding: 0 10px;
            flex: 1;
            flex-shrink: 0;
            background-color: #fff;

            & > img {
              width: 100%;
              height: 174px;
            }
          }

          .content-footer {
            width: 100%;
            text-align: center;
            padding: 5px 0;
            background-color: #f7c863;
          }
        }

        .pageNumber {
          height: 26px;
          line-height: 26px;
          text-align: center;
        }
      }
    }
  }

  .right-box {
    flex: 1;
    border: 1px solid #ccc;
    margin-left: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .left-header {
      height: 16px;
      line-height: 16px;
      color: #526a89;
      font-weight: bold;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 26px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background-color: #006cff;
        margin-right: 6px;
      }
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
    }
  }
}

// :deep(.el-popper) {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
// }
</style>
